<template>
  <page-header-wrapper>

    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-row type="flex" justify="space-between" style="margin: 0 0 10px 0 ">
          <a-col>
            <a-button type="danger" @click="delSystemMsg">删除</a-button>
          </a-col>
          <!-- <a-col>
            <a-row type="flex">
              <a-col style="margin-right: 10px">
                <a-input v-model="keyword" placeholder="请输入关键字"></a-input>
              </a-col>
              <a-col>
                <a-config-provider :auto-insert-space-in-button="false">
                  <a-button type="primary" @click="toSearch">查找</a-button>
                </a-config-provider>
              </a-col>
            </a-row>
          </a-col> -->
        </a-row>
      </div>
      <a-table :scroll="{ x: 1500}" :row-selection="rowSelection" :columns="columns" :data-source="systemMsgList" bordered :pagination="pagination" :rowKey="record=>record.id">
        <!-- <span slot="customTitle">创建时间<a-icon type="caret-up" /><a-icon type="caret-down" /></span> -->
        <a slot="edit" slot-scope="text,record">
          <div @click="showModal(record,1)">查看</div>
        </a>
      </a-table>
    </a-card>
    <!-- <a-modal v-model="visible"  :title="title" @cancel="cancel" ok-text="提交" @ok="submitForm(form)" :width="800"> -->
    <a-modal v-model="visible" :title="title" :width="800">
      <template slot="footer">
        <a-button key="back" @click="cancel">关闭</a-button>
      </template>
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="反馈类型:">
          <span v-if="form.type == 1">问题反馈</span>
          <span v-if="form.type == 2">使用建议 </span>
          <span v-if="form.type == 3">其他问题</span>
        </a-form-model-item>
        <a-form-model-item label="反馈时间:">
          {{form.createTime}}
        </a-form-model-item>
        <a-form-model-item label="反馈内容:">
          {{form.content}}
        </a-form-model-item>
        <a-form-model-item label="联系人:">
          <span>{{form.contacts}}</span>
        </a-form-model-item>
        <a-form-model-item label="联系方式:">
          {{form.contactsWay}}
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { getPageList, Delfeedback ,GetfeedbackInfo} from '@/api/Feedback'
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        formArea: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      },
      pagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
      },
      index: 0,
      visible: false,
      keyword: '', //列表搜索关键字
      form: {
        title: '',
        formArea: '',
      },
      isAse: true, //排序--是否正序
      showOk: true, //是否显示提交按钮
      systemMsgList: [],
      selectedRowKeys: [], //列表选择key集合
      delIds: [], //待删除消息主键集合
      columns: [
        {
          title: '反馈类型',
          dataIndex: 'type',
          align: 'center',
          width: 200,
          scopedSlots: { customRender: 'type' },
          customRender: function (text) {
            if (text == 1) {
              return '遇到问题'
            } else if (text == 2) {
              return '使用建议'
            } else {
              return '其他问题'
            }
          },
        },
        {
          title: '反馈时间',
          dataIndex: 'createTime',
          align: 'center',
          // sorter: true,
          // slots: { title: 'customTitle'},
          // customHeaderCell: this.headCellClick,
        },
        {
          title: '状态',
          dataIndex: 'readStatus',
          align: 'center',
            // sorter: true,
          //  customHeaderCell: this.headSeateCellClick,
          customRender: function (text) {
            if (text == 0) {
              return '未读'
            } else if (text == 1) {
              return '已读'
            }
          },
        },
        {
          title: '操作',
          dataIndex: 'edit',
          align: 'center',
          width: 150,
          fixed: 'right',
          scopedSlots: { customRender: 'edit' },
        },
      ],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //创建时间自定单击事件，排序
    headCellClick(column) {
      return {
        on: {
          click: () => {
            console.log('点击一下')
            this.isAse = !this.isAse
            this.getList()
          },
        },
      }
    },

     //创建转态自定单击事件，排序
    headSeateCellClick(column) {
      return {
        on: {
          click: () => {
            this.isAse = !this.isAse
            this.getList()
          },
        },
      }
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let _param = {
            title: this.form.title,
            content: this.form.formArea,
          }
          addSystemMsg(_param)
            .then((res) => {
              console.log('新增')
              console.log(res)
              if (res.code === 200) {
                this.getList()
                this.$message.success('提交成功！')
                this.visible = false
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          // 填写错误
          return
        }
      })
    },
    //查找
    toSearch() {
      this.pagination.current = 1
      this.getList()
    },
    showModal(item, index) {
      this.form = item
      this.visible = true
      let _params =  {
        id:item.id
      }
      GetfeedbackInfo(_params).then(res=>{

      }).catch(error=>{

      })
      this.getList()
    },
    //关闭弹窗
    cancel() {
      this.form = { title: '', formArea: '' }
      // 清空表单校验
      this.$refs['ruleForm'].resetFields()
      this.visible = false
    },
    //变更每页条数
    onSizeChange(current, size) {
      this.pagination.current = current
      this.pagination.pageSize = size
      this.getList()
    },
    //翻页
    onPageChange(page, pageSize) {
      this.pagination.current = page
      this.getList()
    },
    //获取列表
    getList() {
      const _this = this
      let _param = {
        keyword: _this.keyword,
        isAse: _this.isAse,
        current: _this.pagination.current,
        size: _this.pagination.pageSize,
      }
      getPageList(_param)
        .then((res) => {
          if (res.code === 200) {
            _this.systemMsgList = res.data.records
            _this.pagination.total = res.data.total
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //根据主键获取消息详细西悉尼
    getInfoById(msgId) {
      getSystemMsgById(msgId)
        .then((res) => {
          console.log('根据Id获取信息')
          console.log(res)
          if (res.code === 200) {
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //批量删除
    delSystemMsg() {
      const _this = this
      if (_this.delIds.length <= 0) {
        _this.$message.error('请选择要删除的消息')
      } else {
        console.log(_this.delIds)
        this.$confirm({
          title: '您确定要删除此信息吗?',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            // 点击确定
            let _params = {
              id: _this.delIds.join(','),
            }
            Delfeedback(_params)
              .then((res) => {
                console.log('删除')
                console.log(res)
                if (res.code === 200) {
                  _this.$message.success('删除成功')
                  _this.selectedRowKeys = [] //删除成功清空选择
                  _this.getList()
                }
              })
              .catch((err) => {
                console.log(err)
              })
          },
          onCancel() {
            // 点击取消
            console.log('Cancel')
          },
        })
      }
    },
  },
  computed: {
    title() {
      return '问题反馈'
    },
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          this.selectedRowKeys = selectedRowKeys
          this.delIds = selectedRows.map((x) => x.id)
        },
        selectedRowKeys: this.selectedRowKeys,
      }
    },
  },
}
</script>

<style lang="less" scoped>
.space {
  margin: 40px 0;
}
::v-deep .ant-form-item {
  margin-bottom: 5px;
}
</style>
